<template>
  <div id="app">
    <div class="body">
        <div>{{ $t('app.china') }}</div>
        <div>{{ $t('app.meiGuo') }}</div>
        <div>{{ $t('app.riBen') }}</div>
        <div>{{ $t('app.faGuo') }}</div>
    </div>
    <div class="footer">
      <button @click="changeLanguage('zh')">中文</button>
      <button @click="changeLanguage('en')">英文</button>
    </div>
  </div>
</template>
<script>
import { setLocale } from '@/i18n'
export default {
  methods: {
    changeLanguage(locale) {
      setLocale(locale)
    }
  },
}
</script>
<style>
.body {
  padding: 20px;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.footer {
  text-align: center;
}
</style>
